(function($){   
        
    var _defaultConfig = {
	        theme : '',
	        value : 0, 
	        width : 200,
	        height : 15,
	        isShowLabel : true,
	        isCanAbort : true
	    };
	
	/**
	 * 进度条构造函数.
	 */
    function ProgressBar($holder, config){        
        var _this = this;    
        Observable.enable(this);    
        this.config = $.extend({}, _defaultConfig, config);
                
        this.$wrapper = $($holder).empty().addClass('progressbar');
        this.$wrapper.addClass(this.config['theme']);
        this.$wrapper.style(this.config['style']);        
        this.$wrapper.css({
            'width' : this.config['width'],
            'height' : this.config['height'],
            'border-radius' : this.config['height'] / 2
        });        
        
        this.$bar = $('<div class="bar"></div>');
        this.$bar.css({           
            'border-radius' : this.config['height'] / 2
        });        
        this.$wrapper.append(this.$bar);   
        
        if(this.config['isShowLabel']){
            this.$label = $('<div class="label"></div>');
            this.$label.css({
                'height' : this.config['height'],
                'line-height' : this.config['height'] + 'px'
            });
            this.$wrapper.append(this.$label);
        }
        //中止按钮.
        if(this.config['isCanAbort']){
            this.$abortBtn = $('<button class="abortBtn">×</button>');
            this.$abortBtn.css({
                'width' : this.config['height'],
                'height' : this.config['height'],
                'line-height' : this.config['height'] + 'px'
            });
            this.$wrapper.append(this.$abortBtn);
            this.$abortBtn.click(function(){
                _this.fire('cancel', _this.rate);
            });
        }
        //设置初始进度.
        this.setValue(this.config['value']);        
    }   
    
    //-------------------------------------------------------------------------------------
    
    /**
     * 获取进度条的值([0-100]).
     */
    ProgressBar.prototype.getValue = function(){       
        return this.$wrapper.attr('value').toInt();
    };
    /**
     * 设置进度条 的值.
     * @param {Number} rate [0-100].
     */
    ProgressBar.prototype.setValue = function(rate){  
        rate = parseFloat(rate);        
        if(Type.isNumber(rate)){            
            rate = rate.constraintRegion(0,100);
            this.rate = rate;
            this.$wrapper.attr('value', rate);
            if(this.config['isShowLabel']){
                this.$label.text(parseInt(rate) + '%');
            }
            this.$bar.css('width', '{0}%'.format(rate));
            if(this.rate == 100 && this.config['isCanAbort']){                
                this.$abortBtn.hide();
            }
        }  
        return this;      
    };
    
    //-------------------------------------------------------------------------------------
    
    /**
     * 显示进度条 .
     */
    ProgressBar.prototype.show = function(){
        this.$wrapper.show();
        return this;
    };
    /**
     * 隐藏进度条 .
     */
    ProgressBar.prototype.hide = function(){
        this.$wrapper.hide();
        return this;
    };
    
    //-------------------------------------------------------------------------------------
    
    /**
     * 将进度条 注册为jQuery插件.
     */
    $.fn.progressBar = function(config) {        
        return this.each(function() {
            var progressBarObj = new ProgressBar(this, config);          
            $(this).data({
            	'progressBar' : progressBarObj,
            	'formField' : progressBarObj
        	});
        });
    };    
})($);